<template>
    <div class="order-shipment-list">
        <van-nav-bar title="订单跟踪" left-arrow :border="false" @click-left="$router.back()" fixed placeholder/>
        <van-tabs v-model="active" v-if="multipleShipments" sticky>
            <van-tab :title="'包裹' + (index + 1)" v-for="(shipment, index) in shipments" :key="shipment.id">
                <order-shipment-list-item :shipment="shipment"/>
            </van-tab>
        </van-tabs>
        <order-shipment-list-item :shipment="firstShipment" v-if="!multipleShipments"/>
    </div>
</template>

<script>
  import * as _ from "lodash"
  import { order } from "@mall/api-services"
  import TrackingTimeline from "@/components/shipping/TrackingTimeline"
  import { NavBar, Tab, Tabs } from "vant"
  import OrderShipmentListItem from "@/views/order/OrderShipmentListItem"

  export default {
    name: "OrderShipmentListView",
    components: {
      OrderShipmentListItem,
      TrackingTimeline,
      [NavBar.name]: NavBar,
      [Tab.name]: Tab,
      [Tabs.name]: Tabs,
    },
    props: {
      id: String,
    },
    data() {
      return {
        active: "1",
        shipments: [],
      }
    },
    computed: {
      multipleShipments() {
        const { shipments } = this
        return _.size(shipments) > 1
      },
      firstShipment() {
        const { shipments } = this
        return _.first(shipments)
      },
    },
    created() {
      this.refreshShipments()
    },
    methods: {
      refreshShipments() {
        const { id } = this
        order.OrderServiceV1.getOrderShipments(id)
          .then(shipments => {
            console.log(shipments)
            this.shipments = shipments
          })
      },
    },
  }
</script>

<style lang="scss" scoped>

    .order-shipment-list {

    }
</style>
